<template>
    <view>
        <view class="placebox">
            <view class="name">{{Name}}</view>
            <!-- <view class="timebox">
                <view class="text1">2024-05-10(今天)</view>
                <view class="text1">1号场 14:00-15:00</view>
            </view> -->
        </view>
        <view class="paymentbox">
            <view class="title">支付明细</view>
            <view class="place" v-for="(item,index) in orderGroup" :key="index">
                <view class="date">{{item.date}}</view>
                <view class="conlist" v-for="(value,i) in item.items" :key="i">
                    <view class="time">{{value.RoomName+' '+value.TimeStart+'-'+value.TimeEnd}}</view>
                    <view class="money">{{'￥'+value.Price}}</view>
                </view>
            </view>
            <view class="Subtotal">
                <view class="subtext">小计</view>
                <view class="submoney">{{'￥'+sum}}</view>
            </view>
            <!-- <view class="score">{{'剩余：'+user.AccountInfo.Score+'挥豆'}}</view> -->
        </view>
        <view class="button">
            <view class="sumtrue" @click="gopage">
                {{'确认支付'+sum}}
            </view>
        </view>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    sum:0,
    orderlist:[],
    Name:'',
    orderGroup:null,
    user:{},
    shopId:'',
};
},
methods: {
    async getmy(){
        let res = await this.$api.post('User/GetUserInfo', {
			ID: uni.getStorageSync('user').UserID
		});
        if(res.code == 0){
            this.user = res.data
        }
    },
    gopage(){
        let listJson = JSON.stringify(this.orderlist)
        let _this = this;
        uni.showModal({
			title: '温馨提示',
			content: `需要支付${this.sum}`,
			confirmText: "确定",
			success: async function (res) {
				if (res.confirm) {
					// if (_this.user.AccountInfo.Score < _this.sum) {
					// 	uni.showModal({
					// 		title: '温馨提示',
					// 		content: '您余额不足，请充值',
					// 		confirmText: "确定",
					// 		success: async function (res) {
					// 			if (res.confirm) {
					// 				_this.nav_to('/pages/user/payHuiDou')
					// 				return
					// 			} else if (res.cancel) {

					// 			}
					// 		}
					// 	});
					// } else {
					// 	_this.$pv.load('支付中', 0)
					// 	await _this.$api.post('/ShopOrder/Order', {
                    //         ShopID:_this.shopId,
                    //         OrderDataJson: listJson
                    //     }).then(res => {
					// 		if (res.code == 0) {
					// 			_this.$pv.msg('预订成功');
                    //             _this.redirect_to('/pages/ball/ball_list_user?title=订场管理&index=3')
					// 		} else {
					// 			_this.$pv.msg('预订失败');
					// 		}
					// 	}).finally(() => {
					// 		_this.$pv.closeLoad()
					// 	})
					// }
                    let res1 = await _this.$api.post('/ShopOrder/Order', {
                            ShopID:_this.shopId,
                            OrderDataJson: listJson
                        })
                    // if(res1.code ==0){
                    //     return
                    // }
                    let pres = await _this.$api.post('/Payment/PayV2', {
                        CompanyID: 6003,
                        total_fee: _this.sum,
                        EventType: '订场',
                        EventID:res1.data.EventID,
                        body: '用户订场',
                        SourcePage:'field_details',
                        // #ifdef MP-WEIXIN
                        PayChannel: "weixin",
                        // #endif
                        // #ifdef APP
                        PayChannel: "app"
                        // #endif
                    });
                    if(pres.data==0){
                        this.$pv.msg('支付成功')
                        this.vipEnd()
                        return
                    }
                    if(pres.data==null){
                        this.$pv.msg(pres.message)
                        return
                    }
                    let payObj = JSON.parse(pres.data);
				
                    uni.requestPayment({
                        provider: 'wxpay',
                        // #ifdef APP
                        orderInfo: payObj,
                        // #endif
                        // #ifdef MP-WEIXIN
                        timeStamp: payObj.timeStamp,
                        nonceStr: payObj.nonceStr,
                        package: payObj.package,
                        signType: payObj.signType,
                        paySign: payObj.paySign,
                        // #endif
                        success: async function(res) {
                            _this.$pv.msg('预订成功');
                            _this.redirect_to('/pages/ball/ball_list_user?title=订场管理&index=3')
                        },
                        fail: function(err) {
                            console.log(err);
                            _this.$pv.msg('支付失败');
                        }
                    });
				} else if (res.cancel) {

				}
			}
		});
        
    },
    //排序
    setSort(){
        this.orderlist.sort((a,b)=>{
            return Date.parse(a.OrderDate) - Date.parse(b.OrderDate)
        })
        this.orderGroup = this.orderlist.reduce((acc,current)=>{
            // console.log(acc,current);
            const key = current.OrderDate;
            if (!acc[key]) {
            acc[key] = { date: key, items: [] };
            }
            acc[key].items.push(current);
            return acc;
        },{})
        console.log(this.orderGroup);
        for(let i =0;i<this.orderlist.length;i++){
            this.sum += this.orderlist[i].Price
        }
        console.log(this.orderlist,this.sum);
    },
},
onLoad(e){
        this.Name = e.name
        this.shopId = e.shopId
        this.orderlist = JSON.parse(this.$store.state.order) 
        this.setSort()
},
onUnload() {
		uni.$off('order');
	},
onShow(){
    this.getmy()
}
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.placebox{
    width: 702rpx;
    // height: 250rpx;
    margin: 24rpx auto;
    border-radius: 16rpx;
    background-color: #fff;
    overflow: hidden;
    .name{
        width: 90%;
        padding-bottom: 21rpx;
        margin: 24rpx auto;
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        // border-bottom: 1rpx solid #E4E4E4;
    }
    .timebox{
        .text1{
            font-size: 28rpx;
            color: #666666;
            margin-bottom: 12rpx;
            margin-left: 32rpx;
        }
    }
}
.paymentbox{
    width: 702rpx;
    // height: 338rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 32rpx;
    box-sizing: border-box;
    margin: 0 auto;
    .title{
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 32rpx;
    }
    .place{
        margin-bottom: 24rpx;
        .date{
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 10rpx;
        }
        .conlist{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24rpx;
            .time{
                font-size: 28rpx;
                color: #666666;
            }
            .money{
                font-size: 28rpx;
                color: #333333;
            }
        }
        
    }
    .Subtotal{
        height: 92rpx;
        border-top: 1rpx solid #E4E4E4;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .subtext{   
            font-size: 24rpx;
            color: #999999;
        }
        .submoney{
            color: #706EEE;
            font-size: 32rpx;
        }
    }
    .score{
        text-align: end;
        font-size: 24rpx;
        color: #999999;
    }
}
.button{
    width: 100%;
    height: 196rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    .sumtrue{
        width: 670rpx;
        height: 88rpx;
        border-radius: 44rpx;
        background-color: #706EEE;
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        margin: 0 auto;
        margin-top: 20rpx;
    }
}
</style>